import React from 'react'
import AppLayout from "../../layouts/AppLayout";
import {GlobalStore} from "../../context";
import DownloadHint from "../../shared-components/DownloadHint/DownloadHint";
import {Tabs} from 'antd-mobile'
import ou_guan_logo from '../../res/images/web/ou_guan/欧冠@2x.png'
import {getOGMatch, getOGPoint, getOGShooter} from "../../apis/goApis";
import moment from "moment";
import wushuju from "../../res/images/web/game-room/wushuju@2x.png";

class OuGuan extends React.Component {

    constructor(props) {
        super(props)
        this.tabs = [
            {title: '积分榜'},
            {title: '射手榜'},
            {title: '比赛'},
        ]
        this.matchTabs = [
            {title: '1/8决赛', value: 8,},
            {title: '1/4决赛', value: 4,},
            {title: '1/2决赛', value: 2,},
            {title: '决赛', value: 1,},
        ]
        this.state = {
            downloadShow: true,
            point: [],
            shooter: [],
            matchType: 8,
            match: [],
        }
    }

    componentDidMount() {
        this.setDownloadShow()
        this.getPoint()
    }

    setDownloadShow = () => {
        const downloadShow = this.context.downloadApp.show
        this.setState({
            downloadShow,
        })
    }

    hidden = () => {
        this.context.downloadApp.hidden()
        this.setState({
            downloadShow: false,
        })
    }

    getPoint = () => {
        getOGPoint()
            .then(res => {
                const point = res.data.ok
                this.setState({
                    point,
                })
            })
    }

    getShooter = () => {
        getOGShooter({
            limit: 500,
            offset: 0,
        })
            .then(res => {
                const shooter = res.data.ok
                this.setState({
                    shooter,
                })
            })
    }

    getMatch = (type) => {
        getOGMatch({type,})
            .then(res => {
                const match = res.data.ok
                this.setState({
                    match,
                })
            })
    }

    table = (head, body,) => {

        const h =  <div
            className='flex-space-around-align-center'
            style={{
                height: '26px',
                padding: '12px',
            }}
        >
            {head.map((title, i) => <div key={i} style={{flex: title.flex, textAlign: title.align,}}>{title.value}</div>)}
        </div>
        const b = body.map((team, index) => <div
            key={index}
            className='flex-space-around-align-center'
            style={{
                height: '44px',
                padding: '12px',
                borderBottom: index !== body.length - 1 ? '1px solid rgba(51,51,51,0.06)' : '',
            }}
        >
            {head.map((title, i) => <div
                key={i}
                style={{
                    flex: title.flex,
                    textAlign: title.align,
                }}
            >{team[title.dataIndex]}</div>)}
        </div>)
        return <>
            {h}
            {b}
        </>
    }

    onTabClick = (index) => {
        if (index === 0) {
            this.getPoint()
        } else if (index === 1) {
            this.getShooter()
        } else if (index === 2) {
            this.getMatch(8)
        }
    }

    onMatchTabClick = (e, index) => {
        const matchType = e.value
        this.setState({
            matchType,
        }, () => {
            this.getMatch(matchType)
        })
    }

    renderMatch = (match) => {
        if (match.length === 0) return <div
            style={{
                textAlign: 'center',
                marginTop: '40%',
            }}
        >
            <img src={wushuju} alt='' style={{width: 96, height: 63,}}/>
            <p className='gray-text'>暂无数据</p>
        </div>

        return match.map((matches, index) => {

            const team1 = matches.Dui1
            const team2 = matches.Dui2
            const list = matches.Match

            return <div key={index} style={{margin: '8px',}}>
                <div
                    style={{width: '100%', background: '#FFA500', height: 26, textAlign: 'center',}}
                >
                    <span
                        style={{fontSize: '12px', lineHeight: '26px', color: '#fff', fontWeight: '600',}}
                    >{team1} vs {team2}</span>
                </div>
                <div style={{background: '#fff', padding: '4px',}}>
                    {list.map((match, index) => {
                        // KeFen: 1
                        // KeImg: ""
                        // KeName: "巴黎圣日尔曼"
                        // Over: 1
                        // Time: 1582056000
                        // ZhuFen: 2
                        // ZhuImg: ""
                        // ZhuName: "多特蒙德"
                        const date = moment(new Date(match.Time * 1000)).format("YYYY年MM月DD日 hh:mm")
                        const over = match.Over
                        const home = match.ZhuName
                        const away = match.KeName
                        const homeFen = match.ZhuFen
                        const awayFen = match.KeFen
                        const homeWin = homeFen > awayFen
                        const tied = homeFen === awayFen
                        let light = '#BEBEBE'
                        let dark = '#333333'
                        let homeColor, awayColor
                        if (tied) {
                            homeColor = light
                            awayColor = light
                        } else {
                            homeColor = homeWin ? dark : light
                            awayColor = homeWin ? light : dark
                        }

                        return <div key={index} >
                            <div style={{background: '#F8F8F8', height: 26,}} className='flex-center-align-center'>
                                <span className='gray-text'>{date}</span>
                            </div>
                            <div className='flex-space-around-align-center' style={{padding: '8px 12px'}}>
                                <div style={{flex: 5,}}>
                                    <div className='flex-space-between-align-center' style={{marginBottom: '22px',}}>
                                        <p>{home}</p>
                                        <p style={{color: homeColor}}>{homeFen}</p>
                                    </div>
                                    <div className='flex-space-between-align-center'>
                                        <p>{away}</p>
                                        <p style={{color: awayColor}}>{awayFen}</p>
                                    </div>
                                </div>
                                <div style={{flex: 1}} className='flex-center-align-center'>
                                    {!over
                                        ? <span style={{display: 'block', width: '36px', heigth: '20px', textAlign: 'center', border: '1px solid rgba(51,51,51,1)'}}>未赛</span>
                                        : <span style={{display: 'block', width: '36px', heigth: '20px', textAlign: 'center', background: '#F8F8F8', color: 'rgba(51, 51, 51, 0.6)'}}>完赛</span>
                                    }
                                </div>
                            </div>
                        </div>
                    })}
                </div>

            </div>
        })
    }

    renderShooter = (shooter) => {
        // DuiName: "拜仁慕尼黑"
        // Img: ""
        // Jin: 11
        // Name: "罗伯特·莱万多夫斯基"
        // PaiMing: 1
        const head = [
            {value: '排名', flex: 1, dataIndex: 'PaiMing'},
            {value: '球员', flex: 3, dataIndex: 'Name'},
            {value: '队名', flex: 2, dataIndex: 'DuiName'},
            {value: '总数', flex:1, dataIndex: 'Jin', align: 'right',},
        ]
        return <div style={{margin: '8px', background: '#fff',}}>
            {this.table(head, shooter)}
        </div>
    }

    renderPoint = (point) => {
        // All: 6
        // Fu: 0
        // Img: ""
        // JiFen: 16
        // Jin: 17
        // Name: "巴黎圣日尔曼"
        // PaiMing: 1
        // Ping: 1
        // Sheng: 5
        // Shi: 2
        // Zu: "A"
        let data = {}
        point.map(team => {
            let rank = team.PaiMing
            let name = team.Name
            let all = team.All
            let win = team.Sheng
            let tied = team.Ping
            let lose = team.Fu
            let group = team.Zu
            let jin = team.Jin
            let shi = team.Shi
            let p = team.JiFen

            let o = {
                rank,
                name,
                all,
                win,
                tied,
                lose,
                group,
                jin,
                shi,
                p,
                zhanji: `${win}/${tied}/${lose}`,
                jinshi: `${jin}/${shi}`,
            }

            if (data[group]) {
                data[group].push(o)
            } else {
                data[group] = [o,]
            }
        })



        return Object.entries(data).map(([group, teams]) => {
            const head = [
                {value: '排名', flex: 2, dataIndex: 'rank'},
                {value: '球队', flex: 6, dataIndex: 'name'},
                {value: '赛', flex: 1, dataIndex: 'all'},
                {value: '胜/平/负', flex:3, dataIndex: 'zhanji'},
                {value: '进/失', flex: 2, dataIndex: 'jinshi'},
                {value: '积分', flex: 2, dataIndex: 'p', align: 'right'},
            ]
            return <div key={group} style={{margin: '8px',}}>
                <div
                    style={{width: '100%', background: '#FFA500', height: 26, textAlign: 'center',}}
                >
                    <span
                        style={{fontSize: '12px', lineHeight: '26px', color: '#fff', fontWeight: '600',}}
                    >{group}</span>
                </div>
                <div style={{background: '#fff',}}>
                    {this.table(head, teams)}
                </div>
            </div>
        })
    }

    render() {

        const download = this.state.downloadShow
        const point = this.state.point
        const shooter = this.state.shooter
        const match = this.state.match


        const tabStyle = {
            height: download
                ? window.innerHeight - 60 - 48 - 50
                : window.innerHeight - 48 - 50,

        }

        const ctnStyle = {
            width: '100%',
            overflow: 'auto',
            overflowY: 'scroll',
        }

        return <AppLayout>
            {download ? <DownloadHint onHidden={this.hidden}/> : null}
            <div className='game-search-input-ctn flex-center-align-center'>
                <img alt='' src={ou_guan_logo} style={{width: 24, height: 24, marginRight: '8px',}}/>
                <p style={{fontSize: '20px',fontWeight: 600, color: '#fff',}}>欧洲冠军联赛</p>
            </div>
            <div style={tabStyle}>
                <Tabs
                    tabs={this.tabs}
                    tabBarBackgroundColor='#213A4B'
                    tabBarActiveTextColor='#FFFFFF'
                    tabBarUnderlineStyle={{border: '2px #36C8B9 solid'}}
                    tabBarInactiveTextColor='#fff'
                    tabBarTextStyle={{fontSize: '14px',}}
                    swipeable={false}
                    onTabClick={(tab, index) => this.onTabClick(index)}
                >

                    <div style={ctnStyle}>{this.renderPoint(point)}</div>
                    <div style={ctnStyle}>{this.renderShooter(shooter)}</div>
                    <div style={ctnStyle}>
                        <Tabs
                            tabs={this.matchTabs}
                            tabBarUnderlineStyle={{border: 'none'}}
                            tabBarActiveTextColor='#FFA500'
                            swipeable={false}
                            onTabClick={(e, idx) => this.onMatchTabClick(e, idx)}
                        >
                            <div>{this.renderMatch(match)}</div>
                        </Tabs>
                    </div>
                </Tabs>
            </div>

        </AppLayout>
    }
}


OuGuan.contextType = GlobalStore


export default OuGuan